<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Js Web</title>
</head>

<body>

    <div class="container">
        <!-- 随便写点什么，方便后面添加元素 -->
        <div>11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
    </div>



    <!-- <input type="text" id="text" value="0">
    <input type="button" id="btn" value="点我+1"> -->
    <!-- <div>
        <span>hello world</span>
        <span>hello world</span>
    </div> -->
    <!-- <h1>JavaScript 验证</h1>

    <p>请输入一个数字然后点击 OK：</p>
    <input type="number" id="id1" min="100" max="300">
    <button onclick="myFunction()">OK</button>

    <p>如果数字小于 100 或大于 300，将显示错误消息。</p>
    <p id="demo"></p> -->

</body>
    <script>
        var div=document.createElement('div');
        div.id='mydiv';
        div.className='box';
        div.innerHTML='我是新的节点';
        console.log(div);
        
        var container=document.querySelector('.container');
        // container.appendChild(div);
        console.log(container.children);
        container.insertBefore(div,container.children[2]);

        // var text=document.querySelector("#text");
        // var btn=document.querySelector("#btn");
        // btn.onclick=function(){
        //     var num=text.value;
        //     console.log(num);
        //     console.log(typeof(num));
        //     num++;   // 这一步里完成了自动类型转换
        //     text.value=num;
        // }

        // var input=document.querySelector("input");
        // input.onclick=function(){
        //     if(input.value=="播放"){
        //         input.value="暂停";
        //     }else{
        //         input.value="播放";
        //     }
        // }
        // 通过js  修改html内容
        // var div=document.querySelector("div");
        // // 读取 div 内部内容
        // // console.log(div.innerText);
        // console.log(div.innerHTML);
        // // 修改该div内部内容
        // div.innerHTML="修改div元素内部的内容为： <span>这是div内部span标签的元素</span>";
        // div.innerText="修改div元素内部的内容为： <span>这是div内部span标签的元素</span>";

    </script>

    <!-- <script>
        function myFunction() {
            const inpObj = document.getElementById("id1");
            document.getElementById("id1").setCustomValidity("随便设置点东西");
            console.log(document.getElementById("id1").valueMissing());
            if(!inpObj.checkValidity()){
                console.log("数据无效");
                document.getElementById("demo").innerHTML = inpObj.validationMessage;
            }else {
                document.getElementById("demo").innerHTML = "Input OK";
            } 
        }

    </script> -->


</html>
